<template>
  <div>
    <HomeTop></HomeTop>
    <div class="">
      <div class="ok-page-width">
        <div>
          <el-image style="width: 100%;height: 260px;margin-top: 20px;border-radius: 5px" :src="require('@/static/images/image01.jpg')"></el-image>
        </div>
        <div class="line-20"></div>
        <div class="ok-box-flex">
          <div class="ok-page-left">
            <div class="ok-width-max">
              <div class="ok-park-model-menu" style="width: 100%">
                <div class="title">联系我们</div>
                <div class="item" :class="{active1:!showThis}" id="contactInfo" @click="showThis=false">联系我们</div>
                <div class="item" :class="{active1:showThis}" id="feedback" @click="showThis=true">在线留言</div>
              </div>
            </div>
          </div>
          <div class="ok-page-main">
            <div class="ok-width-max">
              <div v-if="!showThis">
                <div class="ok-park-info-title">
                  <el-page-header @back="goBack" :content="info.infoTypeName"></el-page-header>
                </div>
                <div class="ok-info20" style="margin-top: 20px;">
                  <div class="ok-article-body">
                    <div style="padding: 20px 40px 40px 40px;text-align: left">
                      <div v-html="info.intro"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="showThis">
                <div class="ok-park-info-title">
                  <el-page-header @back="goBack" content="在线留言"></el-page-header>
                </div>
                <div class="ok-info20">
                  <div class="content">
                    <div style="width: 100%;margin-top: 30px;min-height: 500px">
                      <div class="ok-info20">
                        <el-form :model="formData" :rules="formDataRules" ref="form"  label-width="100px" class="demo-ruleForm">
                          <el-form-item label="姓名" prop="realname">
                            <div class="ok-box-left">
                              <el-input v-model="formData.realname" placeholder="请输入姓名" style="width: 70%;"></el-input>
                            </div>
                          </el-form-item>
                          <el-form-item label="手机号码" prop="phone">
                            <div class="ok-box-left">
                              <el-input v-model="formData.phone" placeholder="请输入手机号码" style="width: 70%;"></el-input>
                            </div>
                          </el-form-item>
                          <el-form-item label="验证码" prop="code">
                            <div class="ok-box-left">
                              <el-input v-model="formData.code" placeholder="请输入图片验证码" style="width: 50%;"></el-input>
                              <div @click="refreshCode" style="margin-left: 10px">
                                <identify-code
                                    :identifyCode="identifyCode"
                                    :contentWidth="120"
                                    :contentHeight="40"
                                    :fontSizeMin="30"
                                />
                              </div>
                            </div>
                          </el-form-item>
                          <el-form-item label="内容" prop="message">
                            <div class="ok-box-left">
                              <el-input v-model="formData.message" type="textarea" placeholder="请输入留言内容"></el-input>
                            </div>
                          </el-form-item>
                        </el-form>
                        <div class="ok-box-center">
                          <el-button type="primary" @click="create">留言</el-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="line-20"></div>
    <HomeFoot></HomeFoot>
  </div>
</template>

<script>
// @ is an alias to /src
import HomeTop from "@/components/HomeTop.vue";
import fa from "element-ui/src/locale/lang/fa";
import IdentifyCode from "@/components/IdentifyCode.vue";
import api from "@/api/publicApi"
import HomeFoot from "@/components/HomeFoot.vue";
export default {
  name: 'ContactIndex',
  computed: {
    fa() {
      return fa
    }
  },
  components: {
    HomeFoot,
    IdentifyCode,
    HomeTop,
  },
  data(){
    return{
      info:{},
      identifyCodes: "0123456789",
      identifyCode: "",
      showThis:false,
      formData:{
        realname:"",
        phone:"",
        code:"",
        message:""
      },
      formDataRules:{
        realname: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
        ],
        code: [
          { required: true, message: '请输入图片验证码', trigger: 'blur' },
        ],
        message: [
          { required: true, message: '请输入留言内容', trigger: 'blur' },
        ],
      }
    }
  },
  mounted() {
    this.getInfo();
    this.refreshCode();
  },
  methods:{
    getInfo(){
      api.getInfo({type:'contact'}).then(res =>{
        this.info = res.result;
      })
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    //刷新验证码
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    //生成验证码，l为生成验证码的长度
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        //随机字符串拼接
        this.identifyCode += this.identifyCodes[
            this.randomNum(0, this.identifyCodes.length)
            ];
      }
    },

    create(){
      this.$refs.form.validate((valid)=>{
        if (valid){
          this.$confirm('是否留言?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if (this.formData.code == this.identifyCode){
              api.createFeedback(this.formData).then(res =>{
                this.$message({
                  message:"留言成功!",
                  type:"success"
                });
              })
            }else {
              this.$message.error("验证码错误!")
            }
            this.refreshCode();
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        }
      })
    },

    goBack() {
      history.go(-1);
    },

  }
}
</script>
<style>
.active1{
  color: #0092FF !important;
  font-weight: bold;
}
</style>
